---
# title: "Ring Width"
title: "轮廓环厚度"
# description: "Utilities for creating outline rings with box-shadows."
description: "用于创建带盒状阴影的轮廓环的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/ringWidth'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = {
  plugin,
  transformProperties: ({ selector, properties }) => {
    if (selector === '.ring-inset') {
      return {'--tw-ring-inset': 'inset'}
    }
    delete properties['--tw-ring-inset']
    delete properties['--tw-ring-offset-width']
    delete properties['--tw-ring-offset-color']
    delete properties['--tw-ring-color']
    delete properties['--tw-ring-offset-shadow']
    delete properties['box-shadow']
    properties['box-shadow'] = properties['--tw-ring-shadow']
    delete properties['--tw-ring-shadow']
    return properties
  }
}


<!-- ## Usage -->
## 使用

<!-- Use the `ring-{width}` utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems. -->
使用 `ring-{width}` 功能来为元素应用特定厚度的实心盒状阴影。 环默认为半透明的蓝色，类似于许多系统中默认的焦点环样式。

```html lightBlue
<template preview class="grid grid-cols-1 sm:grid-cols-4 gap-6 justify-items-center p-8">
  <button tabindex="-1" class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-0">
    ring-0
  </button>
  <button tabindex="-1" class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-2">
    ring-2
  </button>
  <button tabindex="-1" class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring">
    ring
  </button>
  <button tabindex="-1" class="focus:outline-none text-sm w-24 py-3 rounded-md font-semibold text-white bg-blue-500 ring-4">
    ring-4
  </button>
</template>

<button class="... **ring-0**">ring-0</button>
<button class="... **ring-2**">ring-2</button>
<button class="... **ring**">ring</button>
<button class="... **ring-4**">ring-4</button>
```

<!-- Ring utilities compose gracefully with regular `shadow-{size}` utilities and can be combined on the same element.

You can also control the color, opacity, and offset of rings using the [ringColor](/docs/ring-color), [ringOpacity](/docs/ring-opacity), and [ringOffsetWidth](/docs/ring-offset-width) utilities. -->
Ring 功能与常规的 `shadow-{size}` 功能优雅地组合在一起，并且可以在同一个元素上组合。

您还可以使用 [ringColor](/docs/ring-color)、 [ringOpacity](/docs/ring-opacity) 和 [ringOffsetWidth](/docs/ring-offset-width) 等功能来控制环的颜色、不透明度和偏移。

### Focus rings（聚焦环）

<!-- The `focus` variant is enabled for `ring-{width}` utilities by default, which makes it easy to use them for custom focus styles by adding `focus:` to the beginning of any `ring-{width}` utility. -->
默认情况下，`focus` 变体是为 `ring-{width}` 功能启用的，这使得通过在任何 `ring-{width}` 功能的开头添加 `focus:`，可以很容易地将其用于自定义焦点样式。

```html emerald
<template preview class="flex space-x-6 justify-center p-8">
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-emerald-500 focus:outline-none">
    Unfocused
  </button>
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-emerald-500 ring-4 ring-emerald-500 ring-opacity-50 focus:outline-none">
    Focused
  </button>
</template>

<button class="... **focus:ring-4** focus:ring-green-500 focus:ring-opacity-50">
  Button
</button>
```

<!-- The `focus` variant is enabled by default for the [ringColor](/docs/ring-color), [ringOpacity](/docs/ring-opacity), [ringOffsetWidth](/docs/ring-offset-width), and [ringOffsetColor](/docs/ring-offset-color) utilities as well. -->
默认情况下，[ringColor](/docs/ring-color)、[ringOpacity](/docs/ring-opacity)、[ringOffsetWidth](/docs/ring-offset-width) 和 [ringOffsetColor](/docs/ring-offset-color) 等功能都启用了 `focus` 变量。

### Inset rings (内嵌环)

<!-- Use the `ring-inset` utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn't be visible. -->
使用 `ring-inset` 功能来强制在元素的内部而不是外部渲染一个环。这对于位于屏幕边缘，环的一部分不可见的的元素来说是很有用的。

```html fuchsia
<template preview class="flex space-x-6 justify-center p-8">
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-pink-500 ring-4 ring-pink-300">
    Default
  </button>
  <button tabindex="-1" class="focus:outline-none w-32 py-2 rounded-md font-semibold text-white bg-pink-500 ring-4 ring-pink-300 ring-inset">
    Inset
  </button>
</template>

<button class="... ring-4 ring-pink-300">
  Default
</button>

<button class="... ring-4 ring-pink-300 **ring-inset**">
  Inset
</button>
```

---


<!-- ## Responsive

To control the ring width at a specific breakpoint, add a `{screen}:` prefix to any existing ring width utility. For example, use `md:ring-4` to apply the `ring-4` utility at only medium screen sizes and above. -->
## 响应式

要控制特定断点的环宽，请在任何现有的环宽功能中添加 `{screen}:` 前缀。例如，使用 `md:ring-4` 来应用 `ring-4` 功能，只适用于中等尺寸以上的屏幕。

```html
<button class="ring-2 **md:ring-4**">
  <!-- ... -->
</button>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

---

<!-- ## Customizing -->
## 自定义
<!-- To customize which ring width utilities are generated, add your custom values under `ringWidth` key in the `theme` section of your `tailwind.config.js` file. You can use the `DEFAULT` key to specify which width is used for the plain `ring` utility. -->
要自定义生成环形宽度的功能，请在您的 `tailwind.config.js` 文件的 `theme` 部分的 `ringWidth` 键下添加您的自定义值。您可以使用 `DEFAULT` 键来指定哪种宽度用于普通的 `ring` 功能类。

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      ringWidth: {
        'DEFAULT': '2px',
        '6': '6px',
        '10': '10px',
      }
    }
  }
}
```

<!-- Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme). -->
在[主题定制文档](/docs/theme#-5)中了解更多关于定制默认主题的信息。

<!-- ### Variants -->
### 变体
<Variants plugin="ringWidth" />

<!-- ### Disabling -->
### 禁用
<Disabling plugin="ringWidth" />
